<template>
  <div class="vote_main" :class="{'pad0':status==3}">
    <head-top head-title="事务投票" goBack="true"></head-top>
    <div v-if="status == 3">
      <div style="width: 100%;height: 10px;background: #f2f2f2;"></div>
      <div class="vote_root">
        <div class="vote_content border-bottom">
          <p>{{voteList.content}}</p>
          <span>查看详细内容</span>
          <img @click="$router.push('/home/VillageDetail/'+voteList.article_id+'/'+'vote')" src="./images/alreadycast@2x.png"
               alt="">
        </div>
        <div class="vote-wrapper">
          <div class="candidate3 border-bottom-last" v-for="(vote,indexs) in voteList.list" :key="indexs">
            <div class="introduce">
              <div class="img_people">
                <img :src="vote.img_moblie_url" alt="">
              </div>
              <div class="content_word">
                <div class="word_top">
                  <p>{{vote.options}}</p>
                  <span>{{vote.start_time * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</span>
                </div>
                <div class="word_bottom">
                  <p>{{vote.sup_content}}</p>
                  <span @click="toVoteDetail(vote.sup_id)">查看详细内容</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rootbtn" @click="goRoot">
          <button>
            <span>查看票根</span>
          </button>
        </div>
      </div>
    </div>
    <!--查看投票后的票根end-->
    <p v-if="status==4 && s_status!==1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      投票未开启或投票已下架</p>
    <p v-if="status==2 || s_status == 2" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      对不起您不是该小区业主，或者去我的房申请进行审核</p>
    <p v-if="status==5 && s_status !== 1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      您未绑定手机和真实姓名</p>
    <p v-if="status==6 && s_status !== 1 && s_status!==2"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      该项投票已领取表决票或已由同套房屋的其他业主完成</p>
    <div class="notices" v-html="content" v-if="status == 1"></div>
    <div class="detail" @click="$router.push('/home/VillageDetail/'+contentId+'/'+'vote')" v-if="status == 1">查看详情</div>
    <form action="" v-if="status == 1">
      <div class="whole_vote" v-for="(whole,indexs) in wholeVote">
        <!--单选-->
        <div class="single_box" v-if="whole.type==='redio'">
          <div class="single_title">
            <span>议题{{indexs+1}}.（单选）</span>
          </div>
          <div class="candidate-wrapper">
            <div class="candidate" v-for="(item,index1) in whole.data" :key="index1">
              <div class="introduce">
                <div class="img_people">
                  <img :src="item.img_moblie_url" alt="">
                </div>
                <div class="content_word">
                  <div class="word_top">
                    <p>{{item.options}}</p>
                  </div>
                  <div class="word_bottom">
                    <!--<p>{{item.start_time * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</p>-->
                    <span @click="toVoteDetail(item.article_id)">查看详细内容</span>
                  </div>
                </div>
              </div>
              <div :class="optionShow.A?'specialA':'answer'">
                <label :style="{order:optionOrder('agree')}" v-show="optionShow.agree" :for="`${1}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${1}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${1}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.agree}}
                </label>
                <label :style="{order:optionOrder('oppose')}" v-show="optionShow.oppose" :for="`${2}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${2}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${2}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.oppose}}
                </label>
                <label :style="{order:optionOrder('waiver')}" v-show="optionShow.waiver" :for="`${4}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${4}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${4}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.waiver}}
                </label>
                <label :style="{order:optionOrder('most')}" v-show="optionShow.most" :for="`${3}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${3}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${3}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.most}}
                </label>

                <!--特殊-->
                <label :style="{order:optionOrder('A')}" v-show="optionShow.A" :for="`${6}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${6}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${6}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.A}}
                </label>
                <label :style="{order:optionOrder('B')}" v-show="optionShow.B" :for="`${7}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${7}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${7}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.B}}
                </label>
                <label :style="{order:optionOrder('C')}" v-show="optionShow.C" :for="`${8}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" class="same" type="radio" :name="item.supplement_id"
                         :value="`${8}_${item.vote_id}_${villageId}_${userId}_${look}`"
                         :id="`${8}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.C}}
                </label>
              </div>
            </div>
          </div>
        </div>
        <!--多选一-->
        <div class="chose_one" v-if="whole.type==='select'">
          <div class="candidate-wrapper2" v-for="(cup,index) in whole.data">
            <div class="chose_one_title">
              <span>议题{{indexs+1}}.（{{cup.length}}选1）</span>
            </div>
            <div class="candidate" v-for="(item,cupindex) in cup" :key="cupindex">
              <div class="introduce">
                <div class="img_people">
                  <img :src="item.img_moblie_url" alt="">
                </div>
                <div class="content_word">
                  <div class="word_top">
                    <p>{{item.options}}</p>
                  </div>
                  <div class="word_bottom">
                    <!--<p>{{item.start_time * 1000 | dateFmt(('YYYY.MM.DD HH:mm:ss'))}}</p>-->
                    <span @click="toVoteDetail(item.article_id)">查看详细内容</span>
                  </div>
                </div>
              </div>
              <div :class="optionShow.A?'specialA':'answer'">
                <!--change:状态改变后触发 click：点击的那一瞬间触发 stop:阻止点击事件冒泡-->
                <label :style="{order:optionOrder('agree')}" v-show="optionShow.agree" :for="`${1}_${item.vote_id}_${item.supplement_id}`"
                       @change.stop="choseInput(indexs,$event)">
                  <input ref="dis" :data_index="indexs"
                         :data_choseseme="`${indexs}_${1}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${1}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${1}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.agree}}
                </label>
                <label :style="{order:optionOrder('oppose')}" v-show="optionShow.oppose" :for="`${2}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${2}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${2}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${2}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.oppose}}
                </label>
                <label :style="{order:optionOrder('waiver')}" v-show="optionShow.waiver" :for="`${4}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${4}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${4}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${4}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.waiver}}
                </label>
                <label :style="{order:optionOrder('most')}" v-show="optionShow.most" :for="`${3}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${3}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${3}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${3}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.most}}
                </label>

                <!--特殊-->
                <label :style="{order:optionOrder('A')}" v-show="optionShow.A" :for="`${6}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${6}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${6}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${6}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.A}}
                </label>
                <label :style="{order:optionOrder('B')}" v-show="optionShow.B" :for="`${7}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${7}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${7}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${7}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.B}}
                </label>
                <label :style="{order:optionOrder('C')}" v-show="optionShow.C" :for="`${8}_${item.vote_id}_${item.supplement_id}`">
                  <input ref="dis" @click="choseInput(indexs,$event)" :data_index="indexs"
                         :data_choseseme="`${indexs}_${8}_${item.supplement_id}`" class="chosesame" type="radio"
                         :name="item.supplement_id"
                         :value="`${8}_${item.vote_id}_${villageId}_${userId}_${look2}`"
                         :id="`${8}_${item.vote_id}_${item.supplement_id}`">
                  <span></span>{{optionText.C}}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="confirmbtn">
      <button class="reset_btn" @click="resetPost" v-show="status==1">
        <span>重置投票</span>
      </button>
      <button class="confirm_btn" @click="submit" v-show="status==1">
        <span>确认</span>
      </button>
    </div>

    <!--弹窗-->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade" :closeOnClickModal="false" class="popup-wrapper">
      <div class="popup">
        <p class="tishi">提示</p>
        <p class="desc" style="color: red">多选一只能同意一项</p>
        <p class="desc" style="color: red">或者全部随多数（弃权）</p>
        <div class="sure-reset">
          <span class="reset clearfix" @click="reset">确认选择</span>
          <!--<span class="sure clearfix" @click="sureChsose">确认选择</span>-->
        </div>
      </div>
    </mt-popup>

    <!--重置弹窗-->
    <mt-popup v-model="resetPopup"  popup-transition="popup-fade" :closeOnClickModal="false" class="popup-wrapper">
      <div class="popup">
        <p class="tishi">提示</p>
        <p class="popup_text">是否确定重置！</p>
        <div class="btn_flex">
          <span class="closePopup" @click="close_popup">取消</span>
          <span class="confirmPopup" @click="confirm_popup">确定</span>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<style lang="scss" scoped>
  /*@import "../../common/sass/index.scss";*/
  @import "../../common/sass/mixin.scss";

  .mint-indicator-mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: 667;
  }

  .vote_main {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 10%;
    -webkit-overflow-scrolling: touch;
    background: white;
    /*事物投票查看票根样式*/
    .vote_root {
      padding: 10px;
      width: 93%;
      .vote_content {
        width: 100%;
        height: 75px;
        position: relative;
        p {
          font-size: 14px;
          float: left;
          color: #545454;
          /*overflow: hidden;*/
          /*text-overflow: ellipsis;*/
          /*white-space: nowrap;*/
          @include ellipsis(2);
          line-height: 24px;
        }
        span {
          float: right;
          font-size: 14px;
          color: #0078de;
          /*margin-right: 5px;*/
          margin-top: 10px;
        }
        img {
          position: absolute;
          right: 0;
          width: 90px;
        }
      }
      .vote-wrapper {
        .candidate3 {
          width: 100%;
          height: 80px;
          .introduce {
            width: 100%;
            height: 70px;
            margin-top: 10px;
            .img_people {
              padding-top: 10px;
              padding-left: 10px;
              float: left;
              width: 14%;
              img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
              }
            }
            .content_word {
              float: left;
              width: 80%;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  /*margin-right: 5px;*/
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 12px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  /*float: right;*/
                  font-size: 12px;
                  color: #0078de;
                  /*margin-right: 5px;*/
                }
              }
            }
          }
          .answer {
            display: flex;
            width: 100%;
            text-align: center;
            font-size: 16px;
            label {
              width: 25%;
              float: left;
            }
            .same {
              display: none;
            }
            span {
              position: relative;
              background-color: #fff;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 100%;
              display: inline-block;
              height: 16px;
              margin-right: 4px;
              // margin-top: -1px;
              vertical-align: middle;
              width: 16px;
              line-height: 1;
            }
            .same:checked + span:after {
              position: absolute;
              top: 3px;
              left: 3px;
              background-color: #0078de;
              border-radius: 100%;
              content: "";
              display: inline-block;
              height: 10px;
              width: 10px;
            }
            .same:checked:after {
              border-radius: 0;
            }
          }
        }
      }
      .rootbtn {
        text-align: center;
        button {
          width: 100%;
          background: #0078de;
          outline: none;
          margin-top: 10px;
          span {
            line-height: 40px;
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
    .notices {
      padding: 10px 10px 0 10px;
      box-sizing: border-box;
      height: auto;
      line-height: 22px;
      background-color: #f2f2f2;
      font-size: 16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .detail {
      padding: 15px 10px 10px 10px;
      box-sizing: border-box;
      background-color: #f2f2f2;
      text-align: right;
      color: #0078de;
    }
    .whole_vote {
      /*单选的样式*/
      .single_box {
        margin-bottom: 10px;
        .single_title {
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          span {
            line-height: 40px;
            font-size: 14px;
            color: #666;
            padding-left: 10px;
          }
        }
        .candidate-wrapper {
          .candidate {
            width: 100%;
            /*height: 140px;*/
            box-shadow: 1px 5px 6px #c9c9c9;
            background-image: linear-gradient(#ffffff, rgba(41, 164, 255, 0.15));
            .introduce {
              width: 100%;
              height: 90px;
              /*margin-top: 10px;*/
              .img_people {
                padding-top: 10px;
                padding-left: 10px;
                float: left;
                width: 14%;
                img {
                  width: 44px;
                  height: 44px;
                  border-radius: 50%;
                }
              }
              .content_word {
                float: left;
                width: 80%;
                .word_top {
                  margin-top: 10px;
                  height: 22px;
                  p {
                    font-size: 15px;
                    float: left;
                    width: 100%;
                    line-height: 20px;
                    display: -webkit-box;
                    /*autoprefixer:自动补全css前缀*/
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    /*text-overflow: ellipsis;*/
                    /*white-space: nowrap;*/
                  }
                }
                .word_bottom {
                  height: 30px;
                  line-height: 30px;
                  /*p {*/
                  /*font-size: 12px;*/
                  /*float: left;*/
                  /*color: #666666;*/
                  /*width: 180px;*/
                  /*overflow: hidden;*/
                  /*text-overflow: ellipsis;*/
                  /*white-space: nowrap;*/
                  /*}*/
                  span {
                    /*float: right;*/
                    font-size: 14px;
                    color: #0078de;
                    /*margin-right: 5px;*/
                  }
                }
              }
            }
            .answer {
              display: flex;
              width: 100%;
              text-align: center;
              font-size: 16px;
              label {
                width: 25%;
                float: left;
                border: 1px dashed #c9c9c9;
                padding: 10px 0;
              }
              .same {
                display: none;
              }
              span {
                position: relative;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 100%;
                display: inline-block;
                height: 16px;
                margin-right: 4px;
                // margin-top: -1px;
                vertical-align: middle;
                width: 16px;
                line-height: 1;
              }
              .same:checked + span:after {
                position: absolute;
                top: 3px;
                left: 3px;
                background-color: #0078de;
                border-radius: 100%;
                content: "";
                display: inline-block;
                height: 10px;
                width: 10px;
              }
              .same:checked:after {
                border-radius: 0;
              }
            }
            /*特殊answer容器样式*/
            .specialA{
              display: grid;
              width: 100%;
              font-size: 16px;
              label {
                display: inline-flex;
                align-items: center;
                padding: 15px;
                border: 1px dashed #c9c9c9;
              }
              .same {
                display: none;
              }
              span {
                position: relative;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 100%;
                display: inline-block;
                height: 16px;
                margin-right: 4px;
                // margin-top: -1px;
                vertical-align: middle;
                width: 16px;
                line-height: 1;
              }
              .same:checked + span:after {
                position: absolute;
                top: 3px;
                left: 3px;
                background-color: #0078de;
                border-radius: 100%;
                content: "";
                display: inline-block;
                height: 10px;
                width: 10px;
              }
              .same:checked:after {
                border-radius: 0;
              }
            }
          }
        }
      }
      /*多选的样式*/
      .chose_one {
        .candidate-wrapper2 {
          margin-bottom: 10px;
          .chose_one_title {
            width: 100%;
            height: 40px;
            background: #f2f2f2;
            span {
              font-size: 14px;
              line-height: 40px;
              color: #666666;
              padding-left: 10px;
            }
          }
          .candidate {
            width: 100%;
            /*height: 140px;*/
            box-shadow: 1px 5px 6px #c9c9c9;
            background-image: linear-gradient(#ffffff, rgba(41, 164, 255, 0.15));
            .introduce {
              width: 100%;
              height: 90px;
              margin-top: 10px;
              .img_people {
                padding-top: 10px;
                padding-left: 10px;
                float: left;
                width: 14%;
                img {
                  width: 44px;
                  height: 44px;
                  border-radius: 50%;
                }
              }
              .content_word {
                float: left;
                width: 80%;
                .word_top {
                  margin-top: 10px;
                  height: 22px;
                  p {
                    font-size: 15px;
                    float: left;
                    width: 100%;
                    line-height: 20px;
                    display: -webkit-box;
                    /*autoprefixer:自动补全css前缀*/
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    /*text-overflow: ellipsis;*/
                    /*white-space: nowrap;*/
                  }
                }
                .word_bottom {
                  height: 30px;
                  line-height: 30px;
                  /*p {*/
                  /*font-size: 12px;*/
                  /*float: left;*/
                  /*color: #666666;*/
                  /*width: 180px;*/
                  /*overflow: hidden;*/
                  /*text-overflow: ellipsis;*/
                  /*white-space: nowrap;*/
                  /*}*/
                  span {
                    /*float: right;*/
                    font-size: 14px;
                    color: #0078de;
                    /*margin-right: 5px;*/
                  }
                }
              }
            }
            .answer {
              display: flex;
              width: 100%;
              text-align: center;
              font-size: 16px;
              label {
                width: 25%;
                float: left;
                border: 1px dashed #c9c9c9;
                padding: 10px 0;
              }
              .chosesame {
                display: none;
              }
              span {
                position: relative;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 100%;
                display: inline-block;
                height: 16px;
                margin-right: 4px;
                // margin-top: -1px;
                vertical-align: middle;
                width: 16px;
                line-height: 1;
              }
              .chosesame:checked + span:after {
                position: absolute;
                top: 3px;
                left: 3px;
                background-color: #0078de;
                border-radius: 100%;
                content: "";
                display: inline-block;
                height: 10px;
                width: 10px;
              }
              .chosesame:checked:after {
                border-radius: 0;
              }
            }
            /*特殊answer容器样式*/
            .specialA{
              display: grid;
              width: 100%;
              font-size: 16px;
              label {
                display: inline-flex;
                align-items: center;
                padding: 15px;
                border: 1px dashed #c9c9c9;
              }
              .same {
                display: none;
              }
              span {
                position: relative;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 100%;
                display: inline-block;
                height: 16px;
                margin-right: 4px;
                // margin-top: -1px;
                vertical-align: middle;
                width: 16px;
                line-height: 1;
              }
              .same:checked + span:after {
                position: absolute;
                top: 3px;
                left: 3px;
                background-color: #0078de;
                border-radius: 100%;
                content: "";
                display: inline-block;
                height: 10px;
                width: 10px;
              }
              .same:checked:after {
                border-radius: 0;
              }
            }
          }
        }
      }
    }
    .confirmbtn {
      width: 100%;
      height: 44px;
      text-align: center;
      position: fixed;
      z-index: 2;
      bottom: 0;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .reset_btn{
        width: 30%;
        height: 44px;
        background: #b5d652;
        outline: none;
        border-radius: 0;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
      .confirm_btn {
        width: 70%;
        height: 44px;
        background: #0078de;
        outline: none;
        border-radius: 0;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
      .pad0 {
        padding-top: 40px;
        padding-bottom: 0;
      }
    }
    .popup-wrapper {
      width: 70%;
      height: 28%;
      border-radius: 15px;
      .popup {
        padding: 10px 0;
        p {
          text-align: center;
        }
        .tishi {
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: 700;
        }
        .desc-bottom {
          font-size: 15px;
          color: #666;
          padding: 0 10px 23px 10px;
          line-height: 16px;
        }
        .desc {
          font-size: 15px;
          color: #666;
        }
        .sure-reset {
          width: 100%;
          font-size: 16px;
          position: absolute;
          bottom: 0;
          left: 0;
          border-top: 1px solid #f0f0f0;
          .reset {
            padding: 10px 0;
            display: inline-block;
            text-align: center;
            width: 100%;
            color: #666;
            /*border-right: 1px solid #f0f0f0;*/
          }
          /*.sure {*/
          /*text-align: center;*/
          /*width: 49%;*/
          /*padding: 10px 0;*/
          /*float: right;*/
          /*color: #0078de;*/
          /*}*/
        }
        .popup_text{
          font-size: 18px;
          color: #545454;
        }
        .btn_flex{
          width: 100%;
          font-size: 16px;
          position: absolute;
          bottom: 0;
          left: 0;
          border-top: 1px solid #f0f0f0;
          .closePopup{
            padding: 20px 0;
            display: inline-block;
            text-align: center;
            width: 49%;
            color: #666;
            border-right: 1px solid #f0f0f0;
          }
          .confirmPopup {
            text-align: center;
            width: 49%;
            padding: 20px 0;
            float: right;
            color: #0078de;
          }
        }

      }
    }
  }

</style>
<script>
  import headTop from '../header/Header.vue'
  import { loadVillageId, loadUserId } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import qs from 'qs'
  import $ from 'jquery'
  import { Toast, Indicator } from 'mint-ui'
  // import { Toast } from 'mint-ui'
  import { getsVoteList } from '../../api/satisfaction'

  export default {
    name: 'Vote',
    data () {
      return {
        wholeVote: [], // 投票数据整体
        agree: 0,
        data: [],
        popupVisible: false, // 多选一提示弹窗
        userId: loadUserId(),
        mask: false,
        tishi: '',
        status: {
          type: Number
        },
        s_status: {
          type: Number
        },
        villageId: loadVillageId(),
        content: '',
        contentId: '',
        optionShow: '', // 投票选项显示（总）
        agreeShow: '', // 投票选项显示  同意
        opposeShow: '', // 反对
        waiverShow: '', // 弃权
        mostShow: '', // 随多数
        optionText: '', // 投票选项文字（总）
        agreeText: '', // 同意文案
        opposeText: '', // 反对文案
        waiverText: '', // 弃权文案
        mostText: '', // 随多数文案
        voteList: {}, // 票根内容
        wholeArr: [], // 用于存放多选选项的个数
        singleArr: [], // 用于存放单选选项的个数
        allLength: '', // 存放所有选项的个数
        look: 'radio', // 单选标识
        look2: 'select', // 多选标识
        mulNumber: 0, // 判断多选type=select出现了几次
        resetPopup: false, // 重置提示弹窗
        voteTypeOrder: [] // 存放选项顺序
      }
    },
    components: {
      headTop
    },
    created () {
      this._getVoteList()
    },
    methods: {
      toVoteDetail (id) {
        this.$router.push('/home/VillageDetail/' + id + '/' + 'vote')
      },
      _getVoteList () {
        getsVoteList(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.status = res.data.status
            if (this.status === 1) {
              // 所有投票数据
              this.wholeVote = res.data.voteData
              // 计算整个投票选项的个数处理（用于后面提交时判断是否全部完成了投票）
              var wholeData = this.wholeVote
              for (var a = 0; a < wholeData.length; a++) {
                if (wholeData[a].type === 'select') {
                  this.mulNumber++
                  // console.log(wholeData[a].data)
                  var wh = wholeData[a].data
                  for (var b = 0; b < wh.length; b++) {
                    var whole = wh[b]
                    whole.forEach(item => {
                      this.wholeArr.push(item) // 把所有的多选选项全部存到一个数组里
                    })
                  }
                }
                if (wholeData[a].type === 'redio') {
                  // console.log(wholeData[a].data)
                  var singleDate = wholeData[a].data
                  singleDate.forEach(single => {
                    this.singleArr.push(single) // 把所有的单选选项全部存到数组中
                  })
                }
              }
              // 总的投票选项数 = 多选的选项个数 + 单选的选项个数（用于提交时候判断是否全部点击投票了）
              this.allLength = this.wholeArr.length + this.singleArr.length
              // console.log(this.allLength)
              this.content = res.data.content
              // console.log(this.content)
              this.contentId = res.data.content_id
              // 选项显示
              this.agreeShow = res.data.voteType.agree
              this.opposeShow = res.data.voteType.oppose
              this.waiverShow = res.data.voteType.waiver
              this.mostShow = res.data.voteType.most
              this.optionShow = res.data.voteType
              // 将选项顺序转换成数组形式
              this.voteTypeOrder = Object.keys(res.data.voteType)
              console.log(res.data.voteType)
              // 选项文案
              this.agreeText = res.data.voteTypeName.agree// 同意文案
              this.opposeText = res.data.voteTypeName.oppose // 反对文案
              this.waiverText = res.data.voteTypeName.waiver // 弃权文案
              this.mostText = res.data.voteTypeName.most // 随多数文案
              this.optionText = res.data.voteTypeName
            }
            if (this.status === 3) {
              this.tishi = res.data.png_url
              this.voteList = res.data.voteDetail
              // console.log(this.voteList)
            }
          }
        })
      },
      // 调整顺序的方法
      optionOrder (type) {
        return this.voteTypeOrder.findIndex((item) => item === type)
      },
      // 多选一的点击
      choseInput (index, event) {
        var a = 0 // 变量用于存放判断弹窗
        var agreeNum = 0 // 同意的个数
        var mostNum = 0 // 随多数的个数
        var qiquan = 0 // 弃权的个数

        var v = event.target.id
        // console.log(v)
        var sid = v.split('_')[2]
        // console.log(sid)
        v = v.split('_')[0]
        // 3：表示随多数  1：表示同意  4：表示弃权
        if (v === '3') {
          // 多选一的每一组为3的时候该组的所有随多数选项都选中
          $('input[data_index=' + index + ']').each(function () {
            if (this.value.split('_')[0] === '3') {
              $(this).prop('checked', true)
            }
          })
          return
        }
        if (v === '4') {
          // 多选一的每一组为4的时候该组的所有弃权选项都选中
          $('input[data_index=' + index + ']').each(function () {
            if (this.value.split('_')[0] === '4') {
              $(this).prop('checked', true)
            }
          })
          return
        }
        // console.log($('input[data_index=' + index + ']:checked').val())
        $('input[data_index=' + index + ']').each(function () {
          // 计算选择随多数的个数和同意的个数，用于判断弹窗
          if (this.checked) {
            if (this.value.split('_')[0] === '1') {
              agreeNum++
            }
            if (this.value.split('_')[0] === '3') {
              mostNum++
            }
            if (this.value.split('_')[0] === '4') {
              qiquan++
            }
            // 多选一里只能选择一个同意（如果选择了随多数，则不能选择同意）
            if (agreeNum !== 0) {
              a = agreeNum + mostNum
              if (a > 1) {
                $('input[data_choseseme=' + index + '_' + v + '_' + sid + ']').prop('checked', false)
                return
              }
            }
            // 多选一里只选选择一个同意（如果选择了弃权，则不能选择同意）
            if (agreeNum !== 0) {
              a = agreeNum + qiquan
              if (a > 1) {
                $('input[data_choseseme=' + index + '_' + v + '_' + sid + ']').prop('checked', false)
                return
              }
            }
          }
        })
        // 多选一中每一组选择了一个同意或者随多数就提示多选一的弹窗（选择完随多数后不能选择同意了）
        if (a > 1) {
          this.popupVisible = true
          return
        }
      },
      // 二选一弹窗的重新选择
      reset () {
        this.popupVisible = false
      },
      submit () {
        // console.log(this.mulNumber)
        // 提交时判断同意的选项，只要选择了一个同意，其它不选也可以
        // var i = 0
        // var j = 0
        // for (i; i < 2; i++) {
        //   $('input[data_index=' + i + ']').each(function () {
        //     if (this.checked) {
        //       j++
        //     }
        //   })
        // }
        const url = `${commonUrl.apihost}index.php/home/Vote_Result/setSupplement`
        // 获取form表单中的值
        var radioNum = 0  // 判断单选选择了几个
        var selectNum = 0 // 判断多选选择的个数
        var dataStr = $('form').serialize()
        // console.log(dataStr)
        // 字符串拼接成后台想要的数据
        var dataArr = dataStr.split('=').join('_').split('&')
        // console.log(dataArr)
        for (var ra = 0; ra < dataArr.length; ra++) {
          // console.log(dataArr[ra])
          // 判断dataStr是否包含radio(str.indexOf("")的值为-1时表示不包含)
          if (dataArr[ra].indexOf('radio') !== -1) {
            radioNum++
          }
          if (dataArr[ra].indexOf('select') !== -1) {
            selectNum++
          }
        }
        var data = []
        dataArr.forEach((item, index) => {
          data.push(item.split('_'))
        })
        console.log(data)
        if (radioNum !== this.singleArr.length) {
          Toast({
            message: '单项选择未选完！',
            position: 'middle',
            duration: 1500
          })
          return
        }
        if ((selectNum < this.mulNumber) && (selectNum === 0)) {
          Toast({
            message: '每项多选一中必须表决一项！',
            position: 'middle',
            duration: 1500
          })
          return
        }
        // var length = data.length
        // if (data[0][0] === '') {
        //   length = 0
        // }
        // console.log('选择的个数：' + length + '-----总个数' + this.allLength)
        // if (length !== this.allLength) {
        //   Toast({
        //     message: '还有投票未投',
        //     position: 'middle',
        //     duration: 1500
        //   })
        //   return
        // }
        Indicator.open({
          text: '投票中...',
          spinnerType: 'fading-circle'
        })
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            Indicator.close()
            // flag 1:表示跳转 0：表示不跳转
            if (res.data.data.flag === 1) {
              if (res.data.data.data.type === 'vote') {
                this.$router.replace('/home/Vote/' + res.data.data.data.id)
                this.$router.go(0) // 刷新
                this._getVoteList()
              } else if (res.data.data.data.type === 'voting') {
                this.$router.replace('/home/voting/' + res.data.data.data.id + '/' + res.data.data.data.can_type)
              } else if (res.data.data.data.type === 'TakeIn') {
                this.$router.replace('/home/TakeIn/' + res.data.data.data.id)
              } else if (res.data.data.data.type === 'TakeScore') {
                this.$router.replace('/home/SatisForm/' + res.data.data.data.id)
              }
            } else if (res.data.data.flag === 0) {
              // this.$router.back()
              // this.$router.go(-6)
              this.$router.replace('/home')
            }
            Toast({
              message: res.data.data.message,
              position: 'middle',
              duration: 3000
            })
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: res.data.error,
              position: 'middle',
              duration: 3000
            })
            // this.$router.go(0)
          }
        })
      },
      // 事物投票查看票根
      goRoot () {
        this.$router.push({name: 'TicketRoot', params: {url: this.tishi}})
      },
      // 重置投票按钮
      resetPost () {
        this.resetPopup = true
      },
      // 重置投票弹窗的取消
      close_popup () {
        this.resetPopup = false
      },
      // 重置投票弹窗的确认
      confirm_popup () {
        this.$router.go(0) // 刷新
      }
    }
  }
</script>
